<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elFormPark" :model="formDataPark" :rules="rules" size="medium" label-width="100px">
        <el-col :span="12">
          <el-form-item label-width="140px" label="停车场名称" prop="chid">
            <el-select v-model="formDataPark.chid" placeholder="请选择停车场名称" :disabled="disabled" clearable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in carshomeList" :key="index" :label="item.chname"
                         :value="item.chid" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="用户类型" prop="buyertype">
            <el-select v-model="formDataPark.buyertype" placeholder="请选择用户类型" clearable :disabled="disabled"
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in buyertypeOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="停车位编号" prop="sparkcode">
            <el-input v-model="formDataPark.sparkcode" placeholder="请输入停车位编号" clearable :disabled="disabled"
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="用户名" prop="buyers">
            <el-input v-model="formDataPark.buyers" placeholder="请输入用户名" clearable :disabled="disabled"
                      :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="门牌号" prop="number">
            <el-input v-model="formDataPark.number" placeholder="请输入门牌号" clearable :disabled="disabled"
                      :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="购买情况" prop="purchasesid">
            <el-select v-model="formDataPark.purchasesid" placeholder="请选择购买情况" clearable :disabled="disabled"
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in purchasesidOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="停车位尺寸" prop="ctid">
            <el-select v-model="formDataPark.ctid" placeholder="请选择停车位尺寸" clearable :disabled="disabled"
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in ctidOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="停车位排列方式" prop="arrangeid">
            <el-select v-model="formDataPark.arrangeid" placeholder="请选择停车位排列方式" clearable :disabled="disabled"
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in arrangeidOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="启用状态" prop="status">
            <el-radio-group v-model="formDataPark.status" size="medium" :disabled="disabled">
              <el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="是否有充电桩" prop="charge">
            <el-radio-group v-model="formDataPark.charge" size="medium" :disabled="disabled">
              <el-radio v-for="(item, index) in chargeOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="数据来源" prop="source">
            <el-select v-model="formDataPark.source" placeholder="请选择数据来源" clearable :disabled="disabled"
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in sourceOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="140px" label="停车状态" prop="sparkstatus">
            <el-select v-model="formDataPark.sparkstatus" placeholder="请选择停车状态" clearable :disabled="disabled"
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in sparkstatusOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm" :disabled="disabled">提交</el-button>
            <el-button @click="goback">返回</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import {listHome} from "@/api/modules/sys-cars-home/home";
import {addParking, getParking, updateParking} from "@/api/modules/sys-cars-home/parking/parking";

export default {
  components: {},
  props: [],
  data() {
    return {
      formDataPark: {
        chid: undefined,
        buyertype: 0,
        sparkcode: undefined,
        buyers: undefined,
        number: undefined,
        purchasesid: 0,
        ctid: 0,
        arrangeid: 0,
        status: 0,
        charge: 0,
        source: 0,
        sparkstatus: 0,




      },

      disabled: false,


      rules: {
        chid: [{
          required: true,
          message: '请选择停车场名称',
          trigger: 'change'
        }],
        buyertype: [{
          required: true,
          message: '请选择用户类型',
          trigger: 'change'
        }],
        sparkcode: [{
          required: true,
          message: '请输入停车位编号',
          trigger: 'blur'
        }],
        buyers: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        number: [{
          required: true,
          message: '请输入门牌号',
          trigger: 'blur'
        }],
        purchasesid: [{
          required: true,
          message: '请选择购买情况',
          trigger: 'change'
        }],
        ctid: [{
          required: true,
          message: '请选择停车位尺寸',
          trigger: 'change'
        }],
        arrangeid: [{
          required: true,
          message: '请选择停车位排列方式',
          trigger: 'change'
        }],
        status: [{
          required: true,
          message: '启用状态不能为空',
          trigger: 'change'
        }],
        charge: [{
          required: true,
          message: '是否有充电桩不能为空',
          trigger: 'change'
        }],
        source: [{
          required: true,
          message: '请选择数据来源',
          trigger: 'change'
        }],
        sparkstatus: [{
          required: true,
          message: '请选择停车状态',
          trigger: 'change'
        }],
      },
      carshomeList: [],
      buyertypeOptions: [{
        "label": "业主",
        "value": 0
      }, {
        "label": "租户",
        "value": 1
      }],
      purchasesidOptions: [{
        "label": "空闲",
        "value": 0
      }, {
        "label": "已被购买",
        "value": 1
      }, {
        "label": "已被租赁",
        "value": 2
      }, {
        "label": "审核中",
        "value": 3
      }],
      ctidOptions: [{
        "label": "小车型",
        "value": 0
      }, {
        "label": "大车型",
        "value": 1
      }],
      arrangeidOptions: [{
        "label": "平行",
        "value": 0
      }, {
        "label": "垂直",
        "value": 1
      }, {
        "label": "侧斜",
        "value": 2
      }],
      statusOptions: [{
        "label": "启用",
        "value": 0
      }, {
        "label": "禁用",
        "value": 1
      }],
      chargeOptions: [{
        "label": "没有",
        "value": 0
      }, {
        "label": "有",
        "value": 1
      }],
      sourceOptions: [{
        "label": "PDA",
        "value": 0
      }, {
        "label": "监控",
        "value": 1
      }, {
        "label": "所有",
        "value": 2
      }],
      sparkstatusOptions: [{
        "label": "空闲",
        "value": 0
      }, {
        "label": "正在停车",
        "value": 1
      }],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.listenedt()
    this.getListCars()
  },
  mounted() {
  },
  methods: {

    //监听操作
    listenedt() {
      if (this.$route.query.operate == "新增") {
        this.disabled = false
        console.log(this.disabled)
      } else if (this.$route.query.operate == "修改") {
        this.disabled = false
        getParking(this.$route.query.chpid).then(response => {
          this.formDataPark = response.data;
        });
      } else if (this.$route.query.operate == "查看") {
        this.disabled = true
        getParking(this.$route.query.chpid).then(response => {
          this.formDataPark = response.data;
        });


      }
    },

    /** 查询车场列表 */
    getListCars() {
      this.loading = true;
      listHome(this.queryParams).then(response => {
        this.carshomeList = response.rows;
        this.loading = false;
      });
    },


    goback() {
      //
      // this.$refs['elFormPark'].resetFields()
      this.$store.dispatch('tagsView/delAllViews',this.$router);
      this.$router.push("parking")

    },


    /** 提交按钮 */
    submitForm() {
      this.$refs["elFormPark"].validate(valid => {
        if (valid) {
          if (this.formDataPark.chpid != null) {
            updateParking(this.formDataPark).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.goback();
            });
          } else {
            addParking(this.formDataPark).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.goback();
            });
          }
        }
      });
    },


  }
}

</script>
<style>
</style>
